<!--
 * @Author: zi.yang
 * @Date: 2021-03-11 21:03:56
 * @LastEditors: zi.yang
 * @Description: 页面组织
 * @FilePath: \vue-music\src\App.vue
-->
<template>
  <div id="app">
    <music-search
      v-on:childByValue="childByValue"
      v-on:isSearchLoading="isSearchLoading"
      v-on:suggestResultParent="suggestResultParent"
      v-on:searchPageType="searchPageType"
      :keyword="keyword"
    ></music-search>
    <template v-if="pageType === 1">
      <search-page
        v-on:isSearchLoading="isSearchLoading"
        v-on:setKeyword="setKeyword"
      ></search-page>
    </template>
    <template v-else-if="pageType === 2">
      <search-result v-bind:result="content"></search-result>
    </template>
    <template v-else>
      <search-suggest v-bind:result="suggestResult" v-on:setKeyword="setKeyword"></search-suggest>
    </template>
    <loading v-show="isLoading"></loading>
  </div>
</template>

<script lang="ts">
import './assets/iconfont/iconfont.css';
import axios from 'axios';
import {
  reactive, toRefs, onMounted, defineComponent,
} from '@vue/composition-api';
import searchResultVue from './components/view/search-result.vue';
import searchSuggesrVue from './components/view/search-suggest.vue';
import searchVue from './components/view/search-page.vue';
import musicSearchVue from './components/search/music-search.vue';
import loadingVue from './components/common/loading.vue';

type tData = {
  content: Array<string>;
  isLoading: boolean;
  pageType: number;
  suggestResult: Object;
  keyword: string;
  historyList: Array<string>;
  childByValue: (childValue: Array<string>) => void;
  isSearchLoading: (isSearch: boolean) => void;
  suggestResultParent: (result: Array<string>) => void;
  searchPageType: (pageType: number) => void;
  setKeyword: (keyword: string) => void;
};

export default defineComponent({
  name: 'App',
  setup() {
    // TODO: 所有方法，属性都压在了一个state中，应当拆分出来
    const state = reactive<tData>({
      content: [],
      isLoading: false,
      pageType: 1,
      suggestResult: {},
      keyword: '',
      historyList: [],
      childByValue(childValue: Array<string>) {
        if (childValue === null) {
          return;
        }
        state.content = childValue;
        state.pageType = 2;
      },
      isSearchLoading(isSearch: boolean) {
        state.isLoading = isSearch;
      },
      suggestResultParent(result: Array<string>) {
        state.suggestResult = result;
        state.pageType = 3;
      },
      searchPageType(pageType: number) {
        state.pageType = pageType;
      },
      setKeyword(keyword: string) {
        state.keyword = keyword;
      },
    });

    onMounted(() => {
      // Add a request interceptor
      axios.interceptors.request.use(
        (config) => {
          // 请求发起前调取加载页
          state.isLoading = true;
          return config;
        },
        (error) => {
          // 请求异常后调关闭加载页
          state.isLoading = false;
          Promise.reject(error);
        },
      );
    });
    return toRefs(state);
  },
  components: {
    'search-page': searchVue,
    'music-search': musicSearchVue,
    'search-result': searchResultVue,
    'search-suggest': searchSuggesrVue,
    loading: loadingVue,
  },
});
</script>

<style scoped>
#app {
  display: flex;
  flex-direction: column;
  justify-content: top;

  width: 100%;
  height: 100vh;

  font-size: '14px';
}
</style>
